<template>
    <div>
        <el-form :inline="true" ref="form" :model="form" label-width="76px" class="demo-form-inline">
            <el-form-item label="任务名称:" prop="task_name">
                <el-input size="mini" placeholder="请输入任务名称" v-model="form.task_name"></el-input>
            </el-form-item>
            <el-form-item label="发布对象:" prop="pub_name">
                <el-select size="mini" v-model="form.student_type" placeholder="全部" filterable clearable>
                    <el-option v-for="item in studentTypeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-input size="mini" placeholder="请输入发布对象名称" v-model="form.pub_name"></el-input>
            </el-form-item>

            <el-form-item label="发布老师:" prop="teacher_id">
                <el-select size="mini" v-model="form.teacher_id" placeholder="全部" filterable clearable>
                    <el-option v-for="item in teacherList" :key="item.id" :label="item.realname" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="任务状态:" prop="teacher_id">
                <el-select size="mini" v-model="form.status" placeholder="全部" filterable clearable>
                    <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发布时间:">
                <el-date-picker size="mini" v-model="form.create_time" type="datetimerange" range-separator="至"
                    value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="起止日期:">
                <el-date-picker size="mini" v-model="form.start_time" type="datetimerange" range-separator="至"
                    value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">筛选</el-button>
            </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="打卡任务" name="first"></el-tab-pane>
            <!--            <el-tab-pane label="课堂任务" name="second"></el-tab-pane>-->
        </el-tabs>
        <div class="table-wrap">
            <el-table :data="tableData" :loading="loading" size="mini" style="width: 100%;margin-bottom: 20px;"
                row-key="id" border stripe default-expand-all>
                <el-table-column prop="id" label="ID" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="task_name" label="任务名称" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="teacher_name" label="发布老师" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="pub_obj_name" label="发布对象" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="create_time" label="发布时间" header-align="center" align="center"></el-table-column>
                <el-table-column prop="status" label="任务状态" header-align="center" align="center"></el-table-column>
                <el-table-column prop="start_time" label="起止日期" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.start_time }} 至<br />
                        {{ scope.row.end_time }}
                    </template>
                </el-table-column>
                <el-table-column prop="has_days" label="已进行/总天数" header-align="center" align="center"></el-table-column>
                <el-table-column prop="clockRate" label="打卡率" header-align="center" align="center"></el-table-column>
                <el-table-column prop="completionRate" label="完成度" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="is_allow_card" label="是否允许补卡" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="allow_card_days" label="允许补卡天数" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="state" label="操作" header-align="center" align="center"
                    v-if="isShow(['kanke:education:task:detail'])">
                    <template slot-scope="scope">
                        <el-link type="primary" style="padding-right: 10px;" @click="detail(scope.row)"
                            v-if="hasPermission('kanke:education:task:detail')">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageInfo.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageInfo.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                </el-pagination>
            </div>
        </div>
    </div>

</template>
<script>
import { hasPermission, isShow } from '@/common/permission';
import { getTeacherData } from "@/api/kanke/teacher/teacher";
import { getTaskList } from "@/api/kanke/exercises/task";
export default {
    name: 'Task',
    components: {
    },
    data() {
        return {
            loading: false,
            activeName: 'first',
            tableData: [],
            teacherList: [],
            statusList: [
                { 'id': 1, 'name': '未开始' },
                { 'id': 2, 'name': '进行中' },
                { 'id': 3, 'name': '已完结' },
                { 'id': 4, 'name': '已过期' },
            ],
            studentTypeList: [
                { 'id': 1, 'name': '班级' },
                { 'id': 2, 'name': '学员' },
            ],
            form: {
                task_name: '',
                student_type: '',
                student_name: '',  //对象名称 1为班级 2为学员
                teacher_id: '',
                status: '',

                create_time: '',
                start_time: '',
            },
            pageInfo: {
                pageSize: 10,
                pageNumber: 1,
                total: 0
            }
        }
    },
    created() {
        this.init();
        this.getTeacherData();
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;


            let params = Object.assign(this.pageInfo, this.form);
            console.log('init params', params);
            getTaskList(params).then((res) => {
                console.log(res);
                this.tableData = res.data.list;
                this.pageInfo.total = res.data.total;
                this.loading = false;
            })
        },
        getTeacherData() {
            getTeacherData().then((res) => {
                console.log('teacher_data_info', res);
                this.teacherList = res.data.list;
            })
        },
        //打卡任务
        handleClick(tab, event) {
            if (tab.name == 'first') {
                this.init();
            }
            if (tab.name == 'second') {
                //当前登录teacher_id
                this.init();
            }
        },
        search: function () {
            this.loading = true;
            this.pageInfo.pageSize = 10;
            this.pageInfo.pageNumber = 1;
            this.init();
        },
        detail: function (obj) {
            let data = {
                id: obj.id,
                task_name: obj.task_name,
                pub_obj_name: obj.pub_obj_name,
                status: obj.status,
                has_days: obj.has_days,
                clockRate: obj.clockRate,
                completionRate: obj.completionRate
            }
            this.$router.push({ path: 'taskDetail', query: data });
        },
        handleSizeChange: function (e) {
            this.pageInfo.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageInfo.pageNumber = e;
            this.init();
        }
    }
}


</script>

<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 200px;
    }
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
</style>